<template>
    <!-- 社区用户帖子头部 -->
    <view class="user-post-view-header">
        <!-- 返回箭头 -->
        <view class="nav-left" @click="handleBack">
            <han-icon name="return" size="36" />
        </view>

        <view class="user-info">
            <image
                :src="
                    userData.avatarUrl ||
                    'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatars/user_1/1748178218020.jpg'
                "
                class="user-avatar"
            />
            <view class="user-name">{{
                userData.username || '香辣鸡腿堡'
            }}</view>
        </view>

        <view class="follow-user" @click="handleClickFollow">
            <text class="follow-title">关注</text>
        </view>

        <view class="more-settings">
            <han-icon name="more_settings" size="36" />
        </view>
    </view>
</template>

<script setup>
import { ref, defineProps } from 'vue';

// 定义接收用户数据的props
const props = defineProps({
    userData: {
        type: Object,
        required: true
    }
});

const userData = props.userData;

console.log(userData);

// 退出页面
const handleBack = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style lang="scss">
.user-post-view-header {
    height: $han-nav-bar-height;
    border-bottom: 1rpx solid $han-global-border-color;
    padding: 0 20rpx;
    display: flex;
    align-items: center;

    .nav-left {
        width: 50rpx;
    }

    .user-info {
        display: flex;

        .user-avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            border: 1rpx solid $han-primary-color;
        }

        .user-name {
            margin: auto;
            margin-left: 20rpx;
        }
    }

    .follow-user {
        margin-left: auto;
        margin-right: 20rpx;
        width: 120rpx;
        height: 50rpx;
        border-radius: $han-border-radius-lg;
        border: 1rpx solid $han-primary-color;
        text-align: center;

        .follow-title {
            color: $han-primary-color;
            font-size: $han-font-size-base;
        }
    }

    .more-settings {
        width: 50rpx;
    }
}
</style>
